<template>
  <basic-container class="app-container">
    <div class="tablists">
      <span
        class="name"
        v-for="(item,index) in grouptabs"
        :class="{active:(indexs==index)}"
        @click="handleTabs(item,index)"
        :key="index"
      >{{item.typeValue}}</span>
    </div>
    <div class="filter_container">
      <el-form :inline="true" :model="groupform" class="demo-form-inline">
        <div style="display: flex;flex-direction: column;">
          <el-form-item label="通用链接:" v-if="indexs=='0'">
            <div class="Universallink" style>
              <span style="margin-right:10px;">{{Universallink.currencyLink}}</span>
              <el-button
                type="info"
                plain
                size="small"
                @click="headerCopy(Universallink.currencyLink)"
              >复制</el-button>
            </div>
          </el-form-item>
          <el-form-item label="内部链接:" v-if="indexs=='0'">
            <div class="Universallink" style>
              <span style="margin-right:10px;">{{Universallink.insideLink}}</span>
              <el-button
                type="info"
                plain
                size="small"
                @click="headerCopy(Universallink.insideLink)"
              >复制</el-button>
            </div>
          </el-form-item>
          <el-form-item label="美团团购:" v-if="indexs=='0'">
            <div class="Universallink" style>
              <span style="margin-right:10px;">{{Universallink.meituanLink}}</span>
              <el-button
                type="info"
                plain
                size="small"
                @click="headerCopy(Universallink.meituanLink)"
              >复制</el-button>
            </div>
          </el-form-item>
          <el-form-item label="支付宝口碑:" v-if="indexs=='0'">
            <div class="Universallink" style>
              <span style="margin-right:10px;">{{Universallink.koubeiLink}}</span>
              <el-button
                type="info"
                plain
                size="small"
                @click="headerCopy(Universallink.koubeiLink)"
              >复制</el-button>
            </div>
          </el-form-item>
          <el-form-item label="抖音团购:" v-if="indexs=='0'">
            <div class="Universallink" style>
              <span style="margin-right:10px;">{{Universallink.douyinLink}}</span>
              <el-button
                type="info"
                plain
                size="small"
                @click="headerCopy(Universallink.douyinLink)"
              >复制</el-button>
            </div>
          </el-form-item>
          <el-form-item label="视频号:" v-if="indexs=='0'">
            <div class="Universallink" style>
              <span style="margin-right:10px;">{{Universallink.shipinhaoLink}}</span>
              <el-button
                type="info"
                plain
                size="small"
                @click="headerCopy(Universallink.shipinhaoLink)"
              >复制</el-button>
            </div>
          </el-form-item>
          <el-form-item label="链接名称:">
            <el-input
              v-model.trim="groupform.linkName"
              size="small"
              clearable
              placeholder="请输入链接名称"
              @keyup.enter.native="handleFiltergroup"
            ></el-input>
            <el-input v-show="false" v-model="groupform.linkName"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="handleFiltergroup"
              icon="el-icon-search"
              size="small"
              plain
            >查询</el-button>
            <el-button
              type="success"
              @click="handleAddgroup(linkType)"
              icon="el-icon-circle-plus-outline"
              plain
              size="small"
            >新建</el-button>
            <el-button
              v-show="linkType == 1"
              type="success"
              @click="handleBatchAdd"
              icon="el-icon-circle-plus-outline"
              plain
              size="small">
              批量新建单品
            </el-button>
            <el-button
              v-show="linkType == 1"
              type="primary"
              @click="handleBatchEdit"
              icon="el-icon-edit-outline"
              plain
              size="small">
              编辑
            </el-button>
            <el-button
              type="danger"
              @click="handleBatchDel"
              icon="el-icon-delete"
              plain
              size="small">
              删除
            </el-button>
            <el-button
              type="warning"
              @click="handlesetWeChat(linkType)"
              icon="el-icon-setting"
              plain
              size="small"
            >设置微信号</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <el-table
      ref="groupTable"
      :key="tableKey"
      v-loading="listLoading"
      :data="groupList"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column type="selection">
      </el-table-column>
      <el-table-column label="图片" align="center" width="120">
        <template slot-scope="{row}">
          <img :src="row.linkHeadPicture" alt class="groupimg" />
        </template>
      </el-table-column>
      <el-table-column label="链接名称" align="center" width="300">
        <template slot-scope="{row}">
          <span>{{ row.linkName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="链接地址" align="center">
        <template slot-scope="{row}">
          <span>{{ row.linkUrl}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="240">
        <template slot-scope="{row}">
          <el-button type="warning" size="mini" @click="handleDeitgroup(row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="groupform.page"
      :limit.sync="groupform.size"
      @pagination="getList"
    />
    <el-dialog
      :title="textgroup[dialogStatus]"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :lock-scroll="true"
      width="55%"
      sytle="height:600px"
    >
      <el-form
        :model="groupForm"
        ref="groupForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="链接名称" required>
          <el-input v-model.trim="groupForm.linkName" style="width:200px" size="small"></el-input>
        </el-form-item>
        <el-form-item label="蛋糕组成" style="position:relative" v-clickoutside="headleclose">
          <el-input
            v-model="Cakecomposition"
            style="width:200px"
            size="small"
            placeholder="请输入商品名称搜索"
            @input="handleserchDebounce(Cakecomposition)"
            @focus="goodsListShow = true"
          ></el-input>
          <div v-show="goodsListShow" class="grouplist" v-loading="searchLoading" element-loading-text="加载中...">
            <div v-if="goodsList&&goodsList.length>0">
              <el-tabs
                :tab-position="tabPosition"
                style="height: 300px;"
              >
                <el-tab-pane
                  style="height: 300px;overflow-y: auto;"
                  v-for="(item,index) in goodsList"
                  :key="index"
                  :label="item.goodsName"
                >
                  <div
                    class="specs-item"
                    v-for="(child,index2) in item.list"
                    :key="index2"
                    @click="handleGoodsList(item.goodsName,child.specs,child.skuId)"
                    v-if="item.list"
                  >{{child.specs}}</div>
                </el-tab-pane>
              </el-tabs>
            </div>
            <div class="nodata" v-else>
              <div class="mg-10">
                <img :src="groupnodataimg" />暂无数据
                <span>(请搜索其他蛋糕)</span>
              </div>
            </div>
            <div class="close">
              <i class="el-icon-error fz-24" @click="headleclose"></i>
            </div>
          </div>
        </el-form-item>
        <div class="goodsListmain">
          <div class="goodsListadd" v-for="(item,index) in groupForm.list" :key="index">
            <div class="left">
              <div class="skucodes">
                <span>{{item.skuName}}</span>
                <br />
              </div>
              <el-input
                type="textarea"
                autosize
                v-model.trim="item.marketName"
                placeholder="营销名称"
                maxlength="50"
                show-word-limit
              ></el-input>
              <!-- <ele-multi-cascader
                clearable
                v-model="item.cityList"
                :options="options"
                :inputValue="configTips"
                separator=">"
                placeholder="请选择城市"
              ></ele-multi-cascader> -->
              <div class="mt-10">
                <el-checkbox class="lh-24" :indeterminate="item.isIndeterminate" v-model="item.checkAll" @change="handleCheckAllCityChange(item)">全选</el-checkbox>
                <el-checkbox-group v-model="item.cityList">
                  <el-checkbox class="lh-24" v-for="city in options" :label="city.value" :key="city.value" @change="handleCheckCityChange(item)">{{city.label}}</el-checkbox>
                </el-checkbox-group>
              </div>
            </div>
            <div class="right">
              <el-upload
                list-type="picture-card"
                :data="{tag:'groupbuy'}"
                action="/api/xmbz-goods/file/upload"
                :show-file-list="false"
                :on-success="(res,file)=>{return handleAvatarSuccess(res,file, item)}"
                :on-change="(res,file)=>{return handleHeadChange(res,file, item)}"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <img v-if="item.imageUrl&&item.imageUrl.length" :src="item.imageUrl" class="avatar" />
                <i v-else class="el-icon-plus"></i>
              </el-upload>
              <i class="el-icon-error Delgoodlist" @click="handleDelgoodlist(index)"></i>
            </div>
          </div>
        </div>

        <div class="flexrows">
          <el-form-item label="链接有效期" required>
            <el-date-picker
              v-model="groupForm.startTime"
              type="datetime"
              placeholder="选择时间"
              size="small"
              style="width: 180px;margin-right:10px"
              default-time="00:00:00"
            ></el-date-picker>
            <el-date-picker
              v-model="groupForm.endTime"
              type="datetime"
              size="small"
              placeholder="选择时间"
              style="width: 180px"
              default-time="23:59:59"
            ></el-date-picker>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="headleCanle">取 消</el-button>
        <el-button
          type="primary"
          @click="updateData(groupForm,'groupForm')"
        >确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="设置微信号"
      :visible.sync="setweixinVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :model="setweixinform">
        <el-form-item label="微信号">
          <el-input
            v-model.trim="setweixinform.WeChat"
            autocomplete="off"
            type="textarea"
            maxlength="20"
            show-word-limit
            placeholder="请输入微信号"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="setweixinVisible = false">取 消</el-button>
        <el-button type="primary" @click="handlesetweixinform">确 定</el-button>
      </span>
    </el-dialog>

    <batchAddDialog ref="batchAddDialog" @confirm="getList"></batchAddDialog>
  </basic-container>
</template>

<script>
import Pagination from "@/components/Pagination"; //分页
import groupnodataimg from "@/assets/image/groupnodata.png";
import Clickoutside from 'element-ui/src/utils/clickoutside'
import {
  getLinkType,
  getqueryPage, //列表
  getCurrencyLink,
  deleteById,
  getNameAndSpecsByName,
  LinksaveOrUpdate,
  getgroupDetails, // 链接详情
  setWxNumber,
  getWxNumber,
  citySelect,     // 城市接口
  batchGroupDelete,
} from "@/api/commodityfiles";
import {debounce} from 'lodash';
import batchAddDialog from "./components/batchAddDialog";

export default {
  directives: {
    Clickoutside
  },
  components: {
    Pagination,
    batchAddDialog,
  },
  data() {
    return {
      options: [],   //总数组
      problemList: [],   //发送的内容
      configTips: '',    // 为空
      groupnodataimg,
      indexs: 0, // tab索引
      grouptabs: [
        //标签数据
      ],
      groupform: {
        linkType: "1",
        linkName: "",
        page: 1,
        size: 10,
      },
      groupList: [], //链接列表数据
      tableKey: 0,
      total: 0,
      listLoading: false,
      //新建及编辑
      textgroup: {
        update: "修改团购信息",
        create: "添加团购信息",
      },
      Universallink: "",
      dialogStatus: "",
      dialogVisible: false,
      Cakecomposition: "",
      linkType: 1,
      groupForm: {
        linkName: "",
        linkType: "",
        startTime: "",
        endTime: "",
        list: [],
      },
      goodsList: [], //蛋糕组成
      tabPosition: "left",
      goodsListShow: false,
      goodsListgroup: [],
      goodsListgroupupdate: [],
      setweixinVisible: false,
      setweixinform: {
        WeChat: "",
      },
      searchLoading: false,
    };
  },
  watch: {
    dialogVisible() {
      if (this.dialogVisible == true) {
        window.removeEventListener("keydown", this.keyupEnter);
      } else {
        // window.addEventListener("keydown", this.keyupEnter);
      }
    },
  },
  mounted() {
    var saberareaIds = JSON.parse(localStorage.getItem("saber-areaId"));
    this.cityareaId = saberareaIds["content"];
    this.getLinkTypeList();
    this.getList();
    this.getCurrencyLinkData();
    citySelect().then(res=>{
      let options = res.data.data
      options.map((item,index)=>{
        item.label = item.deptName
        item.value = item.id + ''
      })
      this.options = options
    })
    // window.addEventListener("keydown", this.keyupEnter);
  },
  destroyed() {
    window.removeEventListener("keydown", this.keyDown, false);
  },
  methods: {
    // 回车事件
    keyupEnter() {
      if (window.event.keyCode == 13) {
        // this.handleFiltergroup(); // 查询事件
      }
    },
    //如果页面有keep-alive缓存功能，这个函数会触发
    activated() {
      // window.addEventListener("keydown", this.keyupEnter);
    },
    deactivated() {
      window.removeEventListener("keydown", this.keyupEnter);
    },
    // 切换tabs
    handleTabs(item, index) {
      this.indexs = index;
      this.groupform.linkType = item.type;
      this.linkType = item.type;
      this.getList();
    },
    getCurrencyLinkData() {
      getCurrencyLink().then((response) => {
        this.Universallink = response.data.data;
      });
    },
    getLinkTypeList() {
      getLinkType().then((response) => {
        this.grouptabs = response.data.data;
      });
    },
    headleclose() {
      this.goodsListShow = false;
    },
    getList() {
      //列表数据
      this.listLoading = false;
      getqueryPage(this.groupform).then((response) => {
        this.groupList = response.data.data.rows;
        this.total = response.data.data.total;
        setTimeout(() => {
          this.listLoading = false;
        }, 1.5 * 1000);
      });
    },

    handleFiltergroup() {
      this.groupform.page = 1;
      this.getList();
      //查询
    },
    handleAddgroup(type) {
      //新建团购
      this.linkType = type;
      this.dialogVisible = true;
      this.dialogStatus = "create";
      this.Cakecomposition = "";
      this.groupForm = {
        linkName: "",
        linkType: "",
        startTime: "",
        endTime: "",
        list: [],
      };
    },
    handleBatchAdd() {
      this.$refs.batchAddDialog.show({type: 'add'})
    },
    handleBatchEdit() {
      const selection = this.$refs.groupTable.selection
      if (!selection || !selection.length) {
        this.$message({
          type: 'warning',
          message: '请先勾选记录'
        })
        return
      }
      this.$refs.batchAddDialog.show({type: 'edit', editGoodsList: selection})
    },
    handleBatchDel() {
      const selection = this.$refs.groupTable.selection
      if (!selection || !selection.length) {
        this.$message({
          type: 'warning',
          message: '请先勾选记录'
        })
        return
      }
      this.$confirm("此操作将永久删除所选商品链接, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
      .then(() => {
        batchGroupDelete(selection.map(item => item.id)).then(res => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getList();
        })
      })
    },
    handleserch(name) {
      if (!name) {
        return;
      }
      this.searchLoading = true;
      getNameAndSpecsByName({
        deptId: this.cityareaId,
        name: name,
      }).then((response) => {
        this.goodsList = response.data.data || [];
      }).finally(() => {
        this.searchLoading = false;
      })
    },
    handleDeitgroup(row) {
      //编辑团购
      this.dialogVisible = true;
      this.dialogStatus = "update";
      getgroupDetails({
        id: row.id,
      }).then((response) => {
        this.groupForm.linkName = response.data.data.linkName;
        this.groupForm.startTime = response.data.data.startTime;
        this.groupForm.endTime = response.data.data.endTime;
        this.groupForm.list = response.data.data.list;
        this.groupForm.list && this.groupForm.list.map((item,index)=>{
          const cityIds = item.cityIds ? item.cityIds.split(',') : []
          const checkAll = this.options.every(item => cityIds.includes(item.value))
          const checkSome = this.options.some(item => cityIds.includes(item.value)) && !this.options.every(item => cityIds.includes(item.value))
          this.$set(item, 'cityList', cityIds)
          this.$set(item, 'isIndeterminate', checkSome)
          this.$set(item, 'checkAll', checkAll)
        })
        this.groupForm.id = response.data.data.id;
      });
    },
    headleCanle() {
      this.dialogVisible = false;
    },
    handleGoodsList(name, specs, skuId) {
      const linkTypeMap = {
        1: {
          message: '该团购为单品，只能添加一组商品',
          length: 1,
        },
        2: {
          message: '该团购为二选一，只能添加两组商品',
          length: 2,
        },
        3: {
          message: '该团购为三选一，只能添加三组商品',
          length: 3,
        },
        4: {
          message: '该团购为四选一，只能添加四组商品',
          length: 4,
        },
        5: {
          message: '该团购为五选一，只能添加五组商品',
          length: 5,
        },
        6: {
          message: '该团购为买一送一，只能添加2组商品',
          length: 2,
        },
      }
      //添加蛋糕组成
      if (this.groupForm.list.length <= 10) {
        const linkTypeObj = linkTypeMap[this.linkType]
        if (linkTypeObj && this.groupForm.list.length >= linkTypeObj.length) {
          this.$message({
            message: linkTypeObj.message,
            type: "warning",
          });
          this.goodsListShow = false;
          return false;
        }
        this.groupForm.list.push({
          skuName: name + "~" + specs,
          marketName: "",
          imageUrl: "",
          skuId: skuId,
          cityList: []
        });
        this.goodsListShow = false;
      }
    },
    handleDelgoodlist(index) {
      //删除蛋糕组成
      this.$confirm("此操作将永久删除该蛋糕组成, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.groupForm.list.splice(index, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    handleDelete(row) {
      //删除
      this.$confirm("此操作将删除该条列表数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteById({
            id: row.id,
          }).then(() => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    updateData(items) {
      if (items.linkName == "") {
        this.$message({
          message: "链接名称必填",
          type: "warning",
        });
        return false;
      }

      if (!items.startTime) {
        this.$message({
          message: "请选择链接开始时间",
          type: "warning",
        });
        return false;
      }
      if (!items.endTime) {
        this.$message({
          message: "请选择链接结束时间",
          type: "warning",
        });
        return false;
      }
      if (this.linkType == "1") {
        if (items.list.length != 1) {
          this.$message({
            message: "该团购为单品，需要添加一组商品",
            type: "warning",
          });
          return false;
        }
      }
      if (this.linkType == "2") {
        if (items.list.length != 2) {
          this.$message({
            message: "该团购为二选一，需要添加二组商品",
            type: "warning",
          });
          return false;
        }
      }
      if (this.linkType == "3") {
        if (items.list.length != 3) {
          this.$message({
            message: "该团购为三选一，需要添加三组商品",
            type: "warning",
          });
          return false;
        }
      }
      if (this.linkType == "4") {
        if (items.list.length != 4) {
          this.$message({
            message: "该团购为四选一，需要添加四组商品",
            type: "warning",
          });
          return false;
        }
      }
      if (this.linkType == "5") {
        if (items.list.length != 5) {
          this.$message({
            message: "该团购为五选一，需要添加五组商品",
            type: "warning",
          });
          return false;
        }
      }
      if (this.linkType == "6") {
        if (items.list.length != 2) {
          this.$message({
            message: "该团购为买一送一，需要添加二组商品",
            type: "warning",
          });
          return false;
        }
      }
      if (items.list && items.list.length) {
        const marketName = items.list.every((items) => {
          return items.marketName;
        });
        const imgUrl = items.list.every((items) => items.imageUrl);
        if (!marketName) {
          this.$message({
            message: "营销名称必填",
            type: "warning",
          });
          return false;
        } else if (!imgUrl) {
          this.$message({
            message: "营销图片必传",
            type: "warning",
          });
          return false;
        }
        let startTime = "",
          endTime = "";
        startTime = this.dayjs(items.startTime)
          .format("YYYY-MM-DD HH:mm:ss")
          .toString();
        endTime = this.dayjs(items.endTime)
          .format("YYYY-MM-DD HH:mm:ss")
          .toString();
        if (endTime <= startTime) {
          this.$message({
            showClose: true,
            message: "结束时间要大于开始时间 ",
            type: "warning",
          });
          return false;
        }

        items.list.map((child) => {
          return {
            skuId: child.skuId,
            marketName: child.marketName,
            imgUrl: child.imageUrl,
            cityIds: child.cityList ? child.cityList.filter(item => item).join(',') : ''
          }
        });
      }

      const params = {
        id: items.id || undefined,
        linkType: this.linkType,
        startTime: this.dayjs(items.startTime)
          .format("YYYY-MM-DD HH:mm:ss")
          .toString(),
        endTime: this.dayjs(items.endTime)
          .format("YYYY-MM-DD HH:mm:ss")
          .toString(),
        list: items.list.map((child) => {
          return {
            skuId: child.skuId,
            marketName: child.marketName,
            imgUrl: child.imageUrl,
            cityIds: child.cityList ? child.cityList.join(',') : ''
          }
        }),
        linkName: items.linkName,
      };
      LinksaveOrUpdate(params).then(() => {
        this.$notify({
          title: "修改商品",
          message: "添加商品成功",
          type: "success",
          duration: 2000,
        });
        this.getList();
        this.dialogVisible = false;
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
          this.goodsListShow = false;
          this.dialogVisible = false;
        })
        .catch(() => {});
    },
    // 图片上传
    // 图片预览及删除
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 单个主图开始上传
    handleAvatarSuccess(response, file, item) {
      item.imageUrl = response.data;
    },
    handleHeadChange() {},
    headerCopy(link) {
      this.copy(link);
    },
    copy(data) {
      let url = data;
      let oInput = document.createElement("input");
      oInput.value = url;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象;
      console.log(oInput.value);
      document.execCommand("Copy"); // 执行浏览器复制命令
      this.$message({
        message: "复制成功",
        type: "success",
      });
      oInput.remove();
    },
    //设置微信号
    handlesetWeChat(item) {
      this.setweixinVisible = true;
      getWxNumber().then((res)=>{
this.setweixinform.WeChat=res.data.data.dictValue
      })
    },
    handlesetweixinform() {
      if (this.setweixinform.WeChat == "") {
        this.$message({
          message: "请输入微信号",
          type: "warning",
        });
      } else {
        const wxNumber={
          dictValue: this.setweixinform.WeChat
        }
        setWxNumber(wxNumber).then((res) => {
          console.log(res);
          this.$message({
            message: "修改微信号成功",
            type: "success",
          });
        });

        this.setweixinVisible = false;
      }
    },
    handleCheckAllCityChange(item) {
      item.cityList = item.checkAll ? this.options.map(item => item.value) : []
      item.isIndeterminate = false
    },
    handleCheckCityChange(item) {
      const checkedCount = item.cityList.length
      item.checkAll = checkedCount === this.options.length;
      item.isIndeterminate = checkedCount > 0 && checkedCount < this.options.length;
    }
  },
  created() {
    this.handleserchDebounce = debounce(this.handleserch, 400)
  }
};
</script>

<style lang='scss'>
.app-container {
  width: 100%;
  box-sizing: border-box;

  .tablists {
    display: flex;
    margin-bottom: 10px;

    .name {
      padding: 0 18px;
      text-align: center;
      color: #000;
      font-size: 20px;
      line-height: 38px;
      cursor: pointer;

      &.active {
        font-size: 18px;
        color: #fff !important;
        background: rgba(24, 144, 255, 1);
        border-radius: 4px;
      }
    }
  }

  .filter_container {
    display: flex;
    justify-content: space-between;

    .demo-form-inline {
      display: flex;
      justify-content: space-between;
    }

    .Universallink {
      margin-right: 20px;
    }
  }

  .groupimg {
    width: 85px;
    height: 85px;
  }
}

.grouplist {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  margin: 5px 0;
  position: absolute;
  width: 100%;
  height: 300px;
  z-index: 999;

  .el-tabs__item {
    padding: 0 10px！important;
  }

  .close {
    position: absolute;
    top: 10px;
    right: 10px;
  }

  .el-tabs__item.is-active {
    color: #fff;
    background: #409eff;
    text-align: center !important;
  }

  .el-tabs--left .el-tabs__header.is-left {
    width: 55% !important;
  }

  .el-tabs--left .el-tabs__item.is-left {
    text-align: center !important;
  }

  el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    z-index: 1;
  }
  
  .specs-item {
    margin: 5px 0;
    line-height:30px;
    cursor: pointer;
    &:hover {
      color: #409eff;
    }
  }

  .nodata {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    img {
      width: 80px;
      display: block;
      margin: auto;
    }

    span {
      font-size: 12px;
    }
  }
}

.flexrows {
  display: flex;

  .endtime {
    .el-form-item__content {
      margin-left: 0 !important;
    }
  }
}

.goodsListmain {
  padding: 0 30px 0 65px;
  box-sizing: border-box;

  .goodsListadd {
    border: 1px dashed rgba(211, 211, 211, 1);
    padding: 10px 22px;
    box-sizing: border-box;
    justify-content: space-between;
    display: flex;
    position: relative;
    margin-bottom: 20px;

    .el-input {
      margin-top: 10px;
    }

    .left {
      width: 80%;

      .skucodes {
        padding: 8px;
        border-radius: 6px;
        border: 1px solid #108ee9;
        color: #108ee9;
        margin-bottom: 8px;
      }
    }

    .right {
      width: 15%;

      .el-upload--picture-card {
        width: 80px !important;
        height: 80px !important;
        line-height: 80px !important;
      }

      .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }

      .avatar-uploader .el-upload:hover {
        border-color: #409eff;
      }

      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 80px;
        height: 80px;
        line-height: 80px;
        text-align: center;
      }

      .avatar {
        width: 80px;
        height: 80px;
        display: block;
      }

      .Delgoodlist {
        position: absolute;
        position: absolute;
        top: -15px;
        right: -15px;
        font-size: 34px;
      }
    }
  }
}
</style>
